<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08_员工列表练习</title>
</head>
<body>
    <input type="text" placeholder="请输入员工姓名" id="i1">
    <input type="text" placeholder="请输入员工工资" id="i2">
    <input type="text" placeholder="请输入员工岗位" id="i3">
    <button onclick="addEmp()">添加员工</button>
    <hr>
    <table border="1px">
        <caption>员工表</caption>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>岗位</th>
        </tr>
    </table>
    <script>
        //准备一个员工数组，用来保存员工数据
        let arr = [];
        const addEmp = ()=>{
            let ename = document.getElementById('i1').value;
            let esal = document.getElementById('i2').value;
            let ejob = document.getElementById('i3').value;
            // console.log(ename,esal,ejob);
            var td1 = document.createElement('td');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
            td1.innerHTML = ename;
            td2.innerHTML = esal;
            td3.innerHTML = ejob;
            var trE = document.createElement('tr');
            trE.append(td1,td2,td3);
            var tableE = document.querySelector('table');
            tableE.append(trE);
            //数据添加到表格后将输入框的内容清空
            document.getElementById('i1').value = '';
            document.getElementById('i2').value = '';
            document.getElementById('i3').value = '';
            //向员工数组添加数据
            //理解以下代码：每执行一次push就是向数组中插入一个元素 -> 这个元素的类型是一个对象 -> 该对象有三个属性，值分别为输入的三个值
            arr.push({
                name:ename,
                salary:esal,
                job:ejob
            })
            console.log(arr);
        }
    </script>
</body>
</html>